<!-- Dom模板 -->
<template>
  <div class="payAwayMain payAwayMains">
    <!-- Dom内容 -->
    <!-- 标题 -->
    <div class="confirmOrderTitle" style="padding: 0;">
        <p class="turnP" @click="closePayAway()">
            <i class="iconfont icon-zuojiantou-01"></i>
        </p>
        <p class="titles">选择支付方式</p>
    </div>
    <!-- 应付金额 -->
    <div class="receivingAddress">
        <div class="personMessage">
            <p>应付金额</p>
            <p class="red">￥{{$store.state.yanqq.prices}}</p>
        </div>
    </div>
    <!-- 选择支付方式 -->
    <div class="discountDiv">
        <div>请选择支付方式：</div>
        <van-radio-group v-model="result">
        <p>
            <span>
                <img src="https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/微信.png" alt="">
                微信支付
            </span>
            <van-radio name="a" checked-color="#ee0a24" />
        </p>
        <p>
            <span>
                <img src="https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/支付宝.png" alt="">
                支付宝
            </span>
            <van-radio name="b" checked-color="#ee0a24" />
        </p>
        </van-radio-group>
        <div class="payTimeDiv">
            <span>请及时支付，剩余支付时间：</span>
            <van-count-down :time="time" format="mm:ss" />
        </div>
    </div>
    <!-- 提交订单 -->
     <div class="submitOrder">
        <button class="settleButton" @click="openPayDetailAlert">确认支付</button>
     </div>
     <!-- 这是那个弹窗 -->
     <!-- <transition name="transHua"> -->
         <div class="payDetailMeng" v-if="payDetailAlertFlag"></div>
        <PayDetailAlert
            class="maiss"
            v-if="payDetailAlertFlag"
            :closePayDetailAlert="closePayDetailAlert"
        />
     <!-- </transition> -->
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import PayDetailAlert from '../payDetailAlert/index.vue';

export default {
  components:{
      PayDetailAlert,
  },
  name: '',
  data() {
    return {
      msg: '测试',
      result: 'a',
      payDetailAlertFlag:false, // 支付详情页
      time: 60 * 60 * 1000, // 倒计时
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      
  },
  // Vue方法定义
  methods: {
      closePayAway(){
        this.$router.history.go(-1);
      },
      openPayDetailAlert(){
          this.payDetailAlertFlag = true;
      },
      closePayDetailAlert(){
          setTimeout(() => {
              this.payDetailAlertFlag = false;
          }, 500);
      }
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../fonts/iconfont.css");

.payAwayMains{
    margin: 0 !important;
}
/* 标题 */
.turnP{
    position: fixed;
    left: 10px;
    top: 2px;
    height: 44px;
    line-height: 44px;
}
.turnP .iconfont{
    font-size: 24px;
}
.titles{
    margin-top: 0;
    text-align: center;
    font-size: 18px;
    height: 44px;
    line-height: 44px;
}

/* 应付金额 */
.personMessage{
    padding: 14px;
    display: flex;
    font-size: 15px;
    justify-content: space-between;
    border-bottom: 1px solid #E4E4E4;
}
.address{
    font-size: 14px;
    color: #999999;
    padding: 8px;
}

/* 订单详情 */
.shopOrder{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.shopOrder>div:nth-child(2){
    padding: 0 20px;
    font-size: 14px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
.pricesDiv{
    display: flex;
    justify-content: space-between;
}

/* 优惠--配送 */
/* 发票--留言 */
/* 总价 */
.discountDiv{
    padding: 14px;
}
.discountDiv img{
    width: 40px;
    padding: 2px;
    vertical-align: middle;
}
.discountDiv p{
    display: flex;
    margin: 16px 0;
    padding-right: 6px;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #bcbcbc;
    justify-content: space-between;
    border: 1px solid #bcbcbc;
}
.discountDiv>p .cirSpan .iconfont{
    font-size: 14px;
}
.discountDiv>div{
    padding: 6px 0;
}
.discountDiv>div:nth-child(2){
    padding: 0;
    /* color: red; */
    font-size: 14px;
}

/* 发票--留言 */

/* 提交订单 */
.submitOrder{
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 49px;
    line-height: 49px;
}
.settleButton{
    color: #fff;
    width: 100vw;
    height: 49px;
    outline: none;
    border: 0;
    background-color: red;
}

/* 公共样式 */

.red{
  color: red;
}
.cirSpan{
    color: #fff;
    padding: 0px 2px;
    display: inline-block;
    border: 1px solid #838383;
    border-radius: 50%;
    background-color: red;
}


/* 选择支付方式页 */
.payAwayMain {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  transition: all 0.5s ease-in-out;
}

/* 付款详情页 */
.payDetailMeng {
  position: fixed;
  top: 0;
  left: 0;
  /* z-index: 3; */
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
}

.maiss{
    position:absolute; 
    width: 100vw;
    height: 100vh;
    z-index: 1;
    top: 0;
    left: 0;
}

/* 支付倒计时 */
.payTimeDiv{
    display:flex;
    align-items: center;
}

/* 页面进入离开的动画 */
/* .transHua-enter {
  transform: translateX(100%);
}
.transHua-leave-to {
  transform: translateX(100%);
} */

</style>